<template>
  <div>
    <MyLayout :menu_key="'1'">
      <el-input v-model="search" placeholder="请输入搜索内容" clearable prefix-icon="el-icon-search" style="width: 200px;"
                @change="user_list"></el-input>
      &nbsp;
      <el-button type="primary" @click="open_create_user_dialog">添加用户</el-button>
      <el-dialog
          title="添加用户"
          :visible.sync="isCreateDialog"
          width="30%"
          :before-close="handleClose">
        <span>
          <create-user ref="create_user" @createUserSubmit="cerateUserSubmit"></create-user>
        </span>
        <span slot="footer" class="dialog-footer">
  </span>
      </el-dialog>
      <el-table
          class="tables"
          :data="userdata"
          style="width: 100%"
          :header-cell-style="{textAlign:'center'}"
          :cell-style="{textAlign:'center'}"
      >

        <el-table-column
            prop="username"
            label="用户名"
            width="100">
        </el-table-column>
        <el-table-column
            prop="nickname"
            label="昵称">
        </el-table-column>
        <el-table-column
            prop="create_time"
            label="创建时间">
        </el-table-column>
        <el-table-column
            label="操作"
            width="180">
          <template slot-scope="scope">
            <el-row>
              <el-col span="12">
                <el-button type="danger" @click="delete_user(scope.row)" size="small">删除</el-button>

              </el-col>
              <el-col span="12">
                <el-button type="primary" size="small" @click="set_password_open_dialog(scope.row)">修改密码</el-button>
                <el-dialog
                    title="修改密码"
                    :visible.sync="isPasswordDialog"
                    width="30%"
                    :before-close="handleClose">
        <span>
          <set-password :user_name="set_password_from.user_name" :user_id="set_password_from.user_id"
                        :nickname="set_password_from.nickname" @UserSubmit="set_password_submit"></set-password>
        </span>
                  <span slot="footer" class="dialog-footer">
  </span>
                </el-dialog>
              </el-col>
            </el-row>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
          layout="prev, pager, next"
          :total="user_data_count"
          @current-change="set_page"
      >
      </el-pagination>
    </MyLayout>
  </div>
</template>

<script>
import MyLayout from "@/components/MyLayout";
import CreateUser from "@/components/user/CreateUser";
import SetPassword from "@/components/user/SetPassword";
import {ApiCreateUser, GetUserList, DeleteUser, UpdatePassword} from "../request/api";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Index",
  components: {
    MyLayout,
    CreateUser,
    SetPassword
  },
  created() {
    this.user_list();
  },
  data() {
    return {
      isCreateDialog: false,
      isPasswordDialog: false,
      userdata: [],
      user_data_count: 0,
      page: 1,
      size: 10,
      search: "",
      set_password_from: {
        user_name: '',
        user_id: '',
        nickname: ''
      }
    };
  },
  methods: {
    //关闭创建用户的弹框
    handleClose() {
      this.isCreateDialog = false;
      this.isPasswordDialog = false;
    },
    //打开创建用户的弹框
    open_create_user_dialog() {
      this.isCreateDialog = true;
      this.$refs.create_user.empty_user_form();
    },
    //创建用户提交到后端
    cerateUserSubmit(user_form) {
      //调用后端api
      ApiCreateUser(user_form).then(res => {
        //成功
        if (res.code == 200) {
          this.$message({
            showClose: true,
            message: '恭喜你，创建用户成功',
            type: 'success'
          });
          this.isCreateDialog = false;
          this.user_list();
        } else {
          //失败
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          });
        }
      })
    },
    //获取用户列表
    user_list() {
      //设置请求参数 页码 每页显示条数
      let data = {
        page: this.page,
        size: this.size,
        search: this.search
      }
      //调用后端获取用户列表的api
      GetUserList(data).then(res => {
        if (res.code == 200) {
          this.userdata = res.data.list;
          this.user_data_count = res.data.count;
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          });
        }

      })
    },
    //设置页码
    set_page(page) {
      this.page = page;
      this.user_list();
    },
    delete_user(row) {
      let data = {
        user_id: row.user_id
      }
      DeleteUser(data).then(res => {
        if (res.code == 200) {
          this.$message({
            showClose: true,
            message: '恭喜你，删除成功',
            type: 'success'
          });
          this.user_list();
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success'
          });
        }

      })
    },
    set_password_open_dialog(row) {
      this.set_password_from = {
        user_name: row.username,
        user_id: row.user_id,
        nickname: row.nickname
      }
      this.isPasswordDialog = true;
    },
    set_password_submit(user_from) {
      let data = {
        user_id: user_from.user_id,
        password: user_from.password,
        new_password: user_from.new_password
      }
      UpdatePassword(data).then(res => {
        if (res.code == 200) {
          this.$message({
            showClose: true,
            message: '恭喜你，修改密码成功',
            type: 'success'
          });
          this.isPasswordDialog = false;
          this.user_list();
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          });
        }
      })
    }
  }
}
</script>

<style scoped>
.tables {
  margin-top: 20px;
}
</style>